<template>
  <div class="login-header">
    <div class="container">
      <h1 class="logo">
        <router-link to="/">小兔鲜</router-link>
      </h1>
      <h3 class="sub">
        <slot></slot>
      </h3>
      <router-link class="entry" to="/">进入网站首页
        <i class="iconfont icon-angle-right"></i>
        <i class="iconfont icon-angle-right"></i></router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginHeader'
}
</script>

<style lang="less" scoped>

.login-header {
  height: 132px;
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;

  .container {
    display: flex;
    align-items: flex-end;

    .logo {
      width: 200px;

      a {
        display: block;
        width: 200px;
        height: 132px;
        // center 18px / contain 理解:
        background: url("../../assets/images/logo.png") no-repeat center 18px/contain;
        font-size: 0;
      }
    }

    .sub {
      flex: 1;
      margin-left: 20px;
      margin-bottom: 38px;
      font-size: 24px;
      font-weight: normal;
      color: #666;
    }

    .entry {
      width: 120px;
      margin-bottom: 38px;
      font-size: 16px;

      i {
        font-size: 14px;
        color: @xtxColor;
        // letter
        letter-spacing: -5px;
      }
    }
  }
}
</style>
